<template>
    <view class="Wrapper" v-if="pageData">
        <swiper class="headImg" circular :indicator-active-color="color" :indicator-dots="pageData.merMemo.length > 1" :autoplay="pageData.merMemo.length > 1" :interval="3000" :duration="1000">
            <swiper-item v-for="(item, index) in pageData.merMemo" :key="index">
                <image :src="$imgUrls(item)" mode="aspectFill" class="wh"></image>
            </swiper-item>
        </swiper>

        <view class="Store">
            <!-- 门店信息 -->
            <view class="Box">
                <view class="row">
                    <image :src="$imgUrls(pageData.logo)" mode="aspectFill" class="Logo"></image>
                    <view class="boxContent">
                        <text class="title ellipsis">{{ pageData.name }}</text>
                        <view class="SalesBox">
                            <view class="Salist">
                                <view class="Saliname">评分</view>
                                <text class="SaliNum">{{ pageData.score }}</text>
                            </view>
                            <view class="Salist">
                                <view class="Saliname">月售</view>
                                <text class="SaliNum">{{ pageData.sales }}</text>
                            </view>
                            <view class="Salist" @click="openLocation">
                                <view class="d-flex a-center">
                                    <view class="Saliname">距离</view>
                                    <view class="iconfont icon-daohang_o size24 color_16d p-left10"></view>
                                </view>
                                <text class="SaliNum">{{ pageData.distance }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="Special">
                    <view class="SpecialTen" v-if="pageData.orderTip">
                        <view class="SpeTile f-shrink-0">会员特惠</view>
                        <view class="SpeBox ellipsis">{{ pageData.orderTip }}</view>
                    </view>
                </view>
            </view>

            <!-- 切换门店 -->
            <view class="Switchs">
                <view class="changeStoer" @click="changStore">
                    <view class="cline">
                        <view class="iconfont icon-qiehuan1 white h6 bold500"></view>
                    </view>

                    <view class="changtein">切换门店</view>
                </view>
                <image :src="$imgUrls(pageData.card_bgimg)" mode="aspectFill" class="Viplog" @click="isVipBtn"></image>
            </view>
        </view>

        <!-- 通告 -->
        <view class="Announcement" @click="toUrl(`/Reserve/article?id=${pageData.notice[0].website_article_id}`)">
            <u-notice-bar :text="pageData.notice[0].website_article_title" speed="50" icon=" " fontSize="13" color="#999999" bgColor="#ffffff"></u-notice-bar>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['pageData'],
        data() {
            return {
                text1: '通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告',
                img: 'https://msraimgcdn.mogoie.com/6165/1752718462830.jpg'
            };
        },
        methods: {
            openLocation() {
                let obj = {
                    s_latitude: this.pageData.pointx,
                    s_longitude: this.pageData.pointy,
                    name: this.pageData.name,
                    nameAdress: this.pageData.address
                };
                this.$pop.openLocation(obj);
            },
            changStore() {
                this.$emit('showStore');
            },
            isVipBtn() {
                if (this.pageData.isVip == 0) return this.toUrl(`/pages/Vip/Vip`);
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 100%;
        padding: 10rpx 24rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        border-radius: 0 0 20rpx 20rpx;
        margin-bottom: 20rpx;
        .headImg {
            width: 100%;
            height: 300rpx;
            border-radius: 10rpx;
            overflow: hidden;
        }
        .Store {
            width: 100%;
            display: flex;
            margin-top: 20rpx;

            .Box {
                flex: 1;
                .Logo {
                    width: 130rpx;
                    height: 130rpx;
                    border-radius: 10rpx;
                    margin-right: 20rpx;
                }

                .boxContent {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    height: 130rpx;
                    justify-content: space-between;
                    .title {
                        color: #000;
                        font-size: 32rpx;
                        font-weight: 700;
                    }
                    .SalesBox {
                        display: flex;
                        .Salist {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 0 30rpx;
                            position: relative;
                            .Saliname {
                                color: #999;
                                font-size: 24rpx;
                            }
                            .SaliNum {
                                color: #000;
                                font-size: 24rpx;
                                font-weight: 500;
                                margin-top: 2rpx;
                            }
                        }
                        .Salist::after {
                            content: '';
                            width: 1px;
                            height: 30rpx;
                            background-color: #999;
                            position: absolute;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                        .Salist:last-child::after {
                            display: none;
                        }
                        .Salist:first-child {
                            padding-left: 0;
                        }
                    }
                }
                .Special {
                    width: 100%;
                    height: 44rpx;
                    margin-top: 20rpx;
                    box-sizing: border-box;
                    .SpecialTen {
                        border: 1px solid #fe2222;
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;
                        border-radius: 6rpx;
                        box-sizing: border-box;
                        .SpeTile {
                            background-color: #cc0000;
                            color: #fff;
                            font-size: 24rpx;
                            padding: 4rpx 12rpx;
                            display: flex;
                            align-items: center;
                        }
                        .SpeBox {
                            padding: 4rpx 10rpx;
                            background-color: #fae6e6;
                            color: #fd4e4e;
                            font-size: 24rpx;
                        }
                    }
                }
            }
            .Switchs {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 20rpx;
                .changeStoer {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    .cline {
                        width: 40rpx;
                        height: 40rpx;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #fe370d;
                    }
                    .changtein {
                        width: 50rpx;
                        color: #fe370d;
                        font-size: 22rpx;
                        margin-left: 10rpx;
                        line-height: 26rpx;
                    }
                }
                .Viplog {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 10rpx;
                }
            }
        }
        .Announcement {
            width: 100%;
            height: 80rpx;
            margin-top: 20rpx;
        }
    }
</style>
